<script setup>
import { toRefs, ref, onMounted, onBeforeUnmount } from 'vue';
import CompassIcon from '@/assets/images/base-map/compass-icon.png';
import IconMinusCircle from '@/assets/images/base-map/icon-minus-circle.png';
import IconPlusCircle from '@/assets/images/base-map/icon-plus-circle.png';
import LayerIcon from '@/assets/images/base-map/layer-icon.png';
import PositionIcon from '@/assets/images/base-map/position-icon.png';
import RulerIcon from '@/assets/images/base-map/ruler-icon.png';
import To3dIcon from '@/assets/images/base-map/to3d-icon.png';
import { useMapStore } from '@/stores';
import { DEFAULT_MAP_STATE } from '@/utils/map-helper';
import {
  MAP_2D_INIT,
  MapBoxFlyTo,
  MapBoxMagnifyZoom,
  MapBoxReduceZoom,
  mapTo3d,
  REMOVE_2D_MAP,
} from '@/utils/map-utils';
import { useMapScale } from '@/utils/useMapScale';
import MapBaseLayer from './MapBaseLayer.vue';
import MapMeasure from './MapMeasure.vue';
import MapPoints from './MapPoints.vue';

const props = defineProps({
  mapId: String,
});
const { mapId } = toRefs(props);
let map2D = null;

const { scale } = useMapScale();
const mapStore = useMapStore();

const mapZoom = ref(DEFAULT_MAP_STATE.zoom);
const isMeasure = ref(false); //当前是否开启测量
const showLayer = ref(false); //当前是否显示图层

onMounted(() => {
  setTimeout(() => {
    if (!map2D) {
      map2D = MAP_2D_INIT(mapId.value);
      //   放大缩小
      map2D.on('zoom', function () {
        mapZoom.value = map2D.getZoom().toFixed(0);
      });

      window.addEventListener('resize', resize2D);
    }
  }, 100);
});

function resize2D() {
  map2D?.resize();
}

//初始化视角
const initializationPerspective = () => {
  MapBoxFlyTo([DEFAULT_MAP_STATE.longitude, DEFAULT_MAP_STATE.latitude], DEFAULT_MAP_STATE.zoom);
};

// 切换三维
const handle3DMode = () => {
  mapTo3d(mapStore.mode);
};

// 测量
const handleChangeIsMeasure = () => {
  isMeasure.value = !isMeasure.value;

  if (showLayer.value) {
    showLayer.value = false;
  }
};

// 底图
const handleChangeIsBaseLayer = () => {
  showLayer.value = !showLayer.value;

  if (isMeasure.value) {
    isMeasure.value = false;
  }
};

onBeforeUnmount(() => {
  mapStore.RESET();
  window.removeEventListener('resize', resize2D);
  REMOVE_2D_MAP();
  map2D = null;
});
</script>
<template>
  <div class="map-root relative h-full w-full">
    <!-- 放大缩小初始位置工具 -->
    <div :class="`map-tool-top right-15px`">
      <div class="tool-item" :title="'初始化视角'" @click="initializationPerspective">
        <img :src="CompassIcon" alt="初始化视角" />
      </div>
      <div class="tool-item" :title="'当前位置'" @click="initializationPerspective">
        <img :src="PositionIcon" alt="当前位置" />
      </div>
      <div class="tool-item-changesize">
        <img :title="'放大'" :src="IconPlusCircle" alt="放大" @click="MapBoxMagnifyZoom" />
        <div :title="'级别'">{{ mapZoom }}</div>
        <img :title="'缩小'" :src="IconMinusCircle" alt="缩小" @click="MapBoxReduceZoom" />
      </div>
    </div>
    <div :class="`map-tool-bottom right-15px`">
      <div class="tool-item layer-item" :title="'图层'" @click="handleChangeIsBaseLayer">
        <img :src="LayerIcon" alt="图层" />
      </div>
      <div class="tool-item" title="二三维切换" @click="handle3DMode">
        <img :src="To3dIcon" alt="二三维切换" />
      </div>
      <div class="tool-item" :title="isMeasure ? '关闭测量' : '开启测量'" @click="handleChangeIsMeasure">
        <img :src="RulerIcon" alt="测量" />
      </div>
    </div>

    <!-- 底图 -->
    <MapBaseLayer v-if="showLayer" @handle-change-is-base-layer="handleChangeIsBaseLayer" />

    <!-- 测量 -->
    <MapMeasure v-show="isMeasure" @handle-change-is-measure="handleChangeIsMeasure" />
    <!-- 比例尺 -->
    <div :class="`scale-box left-15px`">
      <span>{{ scale }}</span>
      <div class="scale-border" />
    </div>
    <div :id="mapId" class="relative h-full w-full" />
    <MapPoints />
  </div>
</template>

<style scoped lang="scss">
.map-root {
  overflow: 'hidden';
  .map-tool-top {
    position: absolute;
    top: 100px;
    z-index: 20;
    transition: 1s;

    .tool-item-changesize {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-around;
      width: 48px;
      height: 110px;
      padding: 5px 0;
      background: rgba(0, 69, 93, 0.6) url('@assets/images/base-map/change-size-bg.png') no-repeat center / 100%;
      img {
        display: block;
        width: 20px;
        height: 20px;
        margin: 0 auto;
        cursor: pointer;
      }
      div {
        color: rgba(201, 226, 250, 1);
        font-size: 14px;
      }
    }
  }
  .map-tool-bottom {
    position: absolute;
    bottom: 32px;
    z-index: 20;
    transition: 1s;
  }

  .tool-item {
    width: 48px;
    height: 48px;
    margin-bottom: 10px;
    cursor: pointer;
    img {
      display: block;
      width: 48px;
      height: 48px;
    }
  }
  .scale-box {
    position: absolute;
    bottom: 60px;
    z-index: 25;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 102px;
    height: 30px;
    transition: 1s;

    span {
      color: #fff;
      font-weight: 400;
      font-size: 16px;
      line-height: 24px;
      text-align: center;
    }

    .scale-border {
      width: 102px;
      height: 6px;
      border-right: 2px solid rgb(0, 160, 233);
      border-bottom: 4px solid rgb(0, 160, 233);
      border-left: 2px solid rgb(0, 160, 233);
    }
  }
  .layer-item {
    display: flex;
    align-items: center;
    justify-content: center;
    background: url('@/assets/images/base-map/layer-icon-bg.png') no-repeat center/100%;
    img {
      display: block;
      width: 18px;
      height: 18px;
    }
  }
}
</style>
